<template>
  <el-dialog
    :title="title"
    :objectName="objectName"
    :templatePath="templatePath"
    :contentType="contentType"
    :size="size"
    v-model="batchImport"
    width="500px"
    append-to-body
  >
    <el-form ref="batchFormRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="模板下载">
        <el-link @click="handledownload" type="success">点击下载模板</el-link>
      </el-form-item>
      <el-form-item label="文件上传">
        <el-upload
          class="upload-demo"
          prop="file"
          :on-change="handleBeforeUpload"
          accept=".xls,.xlsx"
          action="#"
          multiple
          :auto-upload="false"
          :show-file-list="false"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
            <div style="padding-left: 20px;" v-if="showUploadFileName != ''">
              {{ showUploadFileName }}
            </div>
          </template>

          <template #tip>
            <div class="el-upload__tip">
              <div class="el-upload__tip" style="color: rgb(231, 161, 161);">只能上传xls,xlsx文件，且不超过10MB</div>
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="batchUpload">导入</el-button>
        <el-button @click="cancelBatch">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ElLoading } from 'element-plus'
const { proxy } = getCurrentInstance();
const emit = defineEmits(['upload-success','upload-cancel']);
const uploadfile = ref("");
const showUploadFileName = ref();
const batchImport = ref(false);
let downloadLoadingInstance;
const props = defineProps({
    templatePath: {
        type: String,
    },
    objectName: {
        type: String,
    },
    contentType: {
        type: String,
    },
    title: {
        type: String,
    },
    batchImport: {
        type: Boolean,
    },
    uploadPath: {
        type: String
    },
    size: {
        type: Number,
        default: 10
    }

});
import request from '@/utils/request'
const data = reactive({
    form: {},
    rules: {
    }
});

const { form, rules } = toRefs(data);



// watch(() => props.resetupload, val => {

//     console.lo


// }, { deep: true, immediate: true });







/** 导出按钮操作 */
function handledownload() {
    // proxy.download('/system/mediaFiles/download', {
    //     bucketName: props.bucketName, objectName: props.objectName, contentType: props.contentType
    // }, props.objectName)
     proxy?.download(props.templatePath, {
  }, props.objectName);
}

/**
 * 上传前处理文件
 */
function handleBeforeUpload(file) {
    uploadfile.value = file.raw
    showUploadFileName.value = file.raw.name
}

function cancelBatch() {
    batchImport.value = false;
    showUploadFileName.value =""
    uploadfile.value="";
    emit("upload-cancel", false);
}



function upload(data, uploadPath) {
    return request({
        url: props.uploadPath,
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data; boundary=something' // 设置请求头为Multipart/form-data
        },
        data: data
    })
}


/**
 * 上传excel
 */
function batchUpload() {
    let formData = new FormData()
    if (uploadfile.value == "") {
        proxy.$modal.msgError("上传文件不能为空！");
        return;
    }

    let uploadFileSize = uploadfile.value.size;
    let maxUploadSize = props.size * 1024 * 1024;
    if (uploadFileSize > maxUploadSize) {
        proxy.$modal.msgError("上传文件大小不能超过" + props.size + "M！");
        return;
    }

    formData.append("file", uploadfile.value)
    downloadLoadingInstance = ElLoading.service({ text: "正在导入数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })

    proxy.$refs["batchFormRef"].validate(valid => {
        if (valid) {
            upload(formData).then(response => {
                downloadLoadingInstance.close();
                batchImport.value = false;
                emit("upload-success", true);
                showUploadFileName.value =""
                uploadfile.value="";
            }).catch(error => {
                console.log(error)
                downloadLoadingInstance.close();
            });
        }
    });

}
</script>
